<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>假期管理</title>
</head>
<body>
<style type="text/css">
	.index-body1{
		padding: 20px;
    	background-color: #f3f3f3;
    	padding-bottom: 30px;
	}
	.index-body2{
		width: 100%;
	    height: 100%;
	    background-color: #fff;
	}
	.index-body3{
		min-width: 950px;
	   padding: 20px;
	    position: relative;
	}
	.title-left{
		display: inline-block;
	    height:30px;
	    line-height:30px;
	    margin-right: 5px;
	    font-size: 12px;
	   	color: gray;
	}
	.title-left span{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	}
	.title-right{
		float: right;
	}
	.title-right div{
		float: left;
		margin-right: 20px;
	}
	.title-right div input{
		background-color: inherit;
		height: 22px;
	    padding: 0 4px;
	    font-size: 14px;
    	text-align: center;
	    border-radius: 2px;
	    border: 1px solid #eee;
	}
	.title-right-btn{
		padding: 2px 8px 1px 8px;
    	font-size: 12px;
    	border-radius: 3px;
    	color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7;
	}
	ul{
	list-style:none;
	}
	.cuowudiv{
		font-family: Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
	    font-size: 14px;
	    line-height: 1.5;
	    color: rgba(0,0,0,.65);
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    margin: 0;
	    padding: 0;
	    list-style: none;
	    position: fixed;
	    z-index: 1500;
	    width: 100%;
	    top: 0px;
	    left: 0;
	    pointer-events: none;
	}
	.bug{
		width: 260px;
	    height: 30px;
	    color: #000;
	    margin:2px auto;
	    text-align: center;
	    line-height: 30px;
	    padding: 10px 16px;
	    border-radius: 4px;
	    box-shadow: 0 4px 12px rgba(0,0,0,.15);
	    background: #fff;
	    pointer-events: all;
	}
	.bug img{
		float: left;
	}
	.cuowu-tishi{
		font-size:13px;
	}
	.top-se>li,.date-search{
	float:left;
	padding-right: 5px;
    padding-left: 5px;
	}
	.top-se span{
		font-size: 12px;
		color: gray;
	}
	.btn3{
		margin-right: 10px;
    	border-radius: 4px;
    	cursor: pointer;
    	background-color: #19AA8D!important;
    	color: #fff!important;
    	border-color: #13826b33!important;
    	border: 1px solid transparent;
	}
	
	.title-right-text{
		color:#666666e3;
		padding-left: 65px;
	    padding-right: 25px;
	    border-radius: 5px;
	    background-color: rgba(242,242,242,1);
	}
	.title-right-text input{
		width: 40px;
    	background-color: #fff;
    	display: inline-block;
	}
	.datagrid-header-row td{
		background: #6666661a;
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	    text-align: center;
	}
	.datagrid-row td{
		background: #fff;
		font-size: 12px;
		text-align: center;
	}
	.modal{
		overflow-x: hidden;
    	overflow-y: auto;
    	opacity: 1;
    	position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1050;
	    outline: 0;
	    display: none;
	}
	.modal-dialog{
		transform: translate(0,0);
		width: 600px;
    	margin: 30px auto;
    	position: relative;
	}
	.modal-content{
		border: none;
    	border-radius: 4px;
    	box-shadow: 2px 2px 6px rgba(0,0,0,.349019607843137);
    	position: relative;
    	background-color: #fff;
    	background-clip: padding-box;
    	outline: 0;
    	font-size: 12px;
    	color: #999;
	}
	.modal-header{
		padding: 6px 15px;
		min-height: 16.42857143px;
		border-bottom: 1px solid #e5e5e5;
	}
	.modal-body{
		overflow-y: auto;
    	max-height: 401px;
    	padding: 8px 15px;
    	position: relative;
	}
	.modal-footer{
		padding: 5px 10px;
		text-align: right;
		height:30px;
    	border-top: 1px solid #e5e5e5;
	}
	.modal-footer button{
		padding: 2px 12px;
	    font-size: 12px;
	    border-radius: 3px;
	    border: 1px solid transparent;
	    margin-bottom: 0;
    	margin-left: 5px;
	}
	.btn-close{
		color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7!important;
	}
	.btn-yes{
		color: #fff!important;
    	background-color: #19AA8D!important;
    	border-color: #19AA8D!important;
	}
	.close{
		padding: 0px;
	    opacity: 1;
	    transition: all linear .2s;
	    margin-top: -2px;
	    border: 0;
	    float: right;
	    background:#fff;
	    outline:none;
	    font-size: 21px;
	    font-weight: 700;
	    line-height: 1;
	    color: #000;
	    text-shadow: 0 1px 0 #fff;
	}
	.modal-backdrop{
		position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1040;
	    background-color: #000;
	    opacity: .5;
	    display: none;
	}
	h3{
	    font-size: 14px;
	    font-weight: 700;
	    font-style: normal;
	    margin: 0;
    	line-height: 1.42857143
	}
	.modal-form-group{
		margin: 0;
		margin-bottom: 10px;
		height:30px;
    	line-height: 1.42857143;
	}
	.form-group-text1,.form-group-text2,.form-group-text3,.form-group-text4{
		padding-right: 5px;
    	padding-left: 0;
    	float: left;
    	text-align: center;
	}
	.modal-form-group span{
		font-size: 14px;
		font-weight: 400;
	}
	.modal-form-group input{
		border-color: #99999929!important;
	    color: #999999cf;
	    padding-left: 10px;
	}
	.form-group-text1{
		width: 59%;
	}
	.form-group-text2{
		width: 100%;
		line-height: 30px;
	}
	.form-group-text3{
		width: 50%;
	    margin-top: 10px;
	}
	.form-group-text4{
		width: 40%;
	    margin-top: 10px;
	}
	ul{
		list-style:none;
		margin: 0px;
	}
	.top-se{
		margin-left: 42px;
	}
	.top-se>li,.date-search{
		float:left;
		padding-right: 5px;
	    padding-left: 5px;
	}
	ul li input{
		height: 24px;
	}
	.textbox{
		height: 25px;
	}
	#zhui{
		width:50px;
		height:20px;
		border-radius: 10px;
		position: relative;
		float: right;
	}
	.kai{
		background-color:#19AA8D!important;
		border-color:#19AA8D!important;
	}
	.guan{
		background-color:gainsboro;
		border-color:gainsboro;
	}
	#yuan{
		width:20px;
		height:20px;
		background-color:#ffffff;
		border-color:#ffffff;
		border-radius: 25px;
		position: absolute;
	}
	.one_kai{
		left:30px;
	}
	.one_guan{
		left:0px;
	}
	.recla{
		width: 100px;
		height: 25px;
	}
</style>
<script type="text/javascript">
function xiugai(id,qi){
	$("#form").form('load','selectJiaId?id='+id);
	$.ajax({
	  	url:"selectJiaId",
	  	type:"post",
	  	data:{"id":id},
	  	success:function(data){
	  		$("#kai").val(data['RE_KAI']);
	  		$("#jie").val(data['RE_JIE']);
	  		$("#qi").val(data['RE_QI']);
	  		if(data['RE_CLASS']==1){
	  			$(".recla").combobox('setValue', '公司');
	  		}else{
	  			$(".recla").combobox('setValue', '法定');
	  		}
	  	}
	 });	
	if(qi==0){
		$("#zhui").removeClass("kai");
		$("#zhui").addClass("guan");
		$("#yuan").animate({ 
			left:'0px',
	  	}, 1 );
	}else if(qi==1){
		$("#zhui").removeClass("guan");
		$("#zhui").addClass("kai");
		$("#yuan").animate({ 
			left:'+30px',
	  	}, 1 );
	}
	kaiqi();
	$(".modal-body").attr("name",1);
	
}

$(function(){
	//初始化表格
	$('#table1').datagrid({
		url:'vacation_selectAll',
		columns:[[
   	 		{field:'RE_ID',hidden:true,align:'center'},
   	 		{field:'RE_QI',hidden:true},
   	 		{field:'sortable',title:'#',width:28,align:'center'},
			{field:'RE_NAME',title:'假期名称',width:200,align:'center'},
			{field:'class',title:'假期类别',width:250,align:'center'},
			{field:'qi',title:'是否启用',width:200,align:'center'},
			{field:'RE_KAI',title:'开始时间',width:200,align:'center'},
			{field:'RE_JIE',title:'结束时间',width:210,align:'center'},
			{field:'caozuo',title:'操作',width:150,align:'center',
				formatter: function(value,row,index){
					return "<button class='btn3' id='btn-xiu' onclick='xiugai("+row['RE_ID']+","+row['RE_QI']+")'>修改</button>";
				},
			}

   	 	]],
	    pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]
	});
	$(".recla").combobox({
		url:'',
		valueField: 'id',
		textField: 'name',
		data: [{id: '1',name: '公司'},{id: '2',name: '法定'}],
		panelHeight:"100",
		onSelect: function(record){
			$("#RE_CLASS").val(record.id);
		}
	});
	$(".close").click(function(){
		guanbi();
	});
	$(".btn-close").click(function(){
		guanbi();
	});
	$(".btn-yes").click(function(){
		var name=$("#RE_NAME").val();
		var id=$("#RE_ID").val();
		var kai=$("#RE_KAI").val();
		var jie=$("#RE_JIE").val();
		var clas=$("#RE_CLASS").val();
		var qi=$("#RE_QI").val();
		var kk=$("#kai").val();
		var jj=$("#jie").val();
		var q=$("#qi").val();
		if(name==""||kai==""||jie==""||clas==""){
			cuowu("请填写完整的信息");
		}else{
			var t11=kai.split("-");
	        var t21=jie.split("-");
	        var strkai;
	        var strjie;
	        if(clas==1){
	        	strkai=parseInt(t11[0]+t11[1]+t11[2]);
	        	strjie=parseInt(t21[0]+t21[1]+t21[2]);
	        }else{
	        	strkai=parseInt(t11[1]+t11[2]);
	        	strjie=parseInt(t21[1]+t21[2]);
	        }
			if(strjie>=strkai){
				//首先，判断是否为修改
				if(kk!=""){
					console.log(kai+"-"+kk+"-"+jie+"-"+jj+"-"+q+"-"+qi)
					if(kai!=kk||jie!=jj||q!=qi){
						//是，则判断修改之前的时间是否为已过考勤
						$.ajax({
			  		  		url:"select-vacation",
			  		  		type:"post",
			  		  		data:{"lei":1,"type":clas,"kai":kk,"jie":jj,"id":id},
			  		  		success:function(result){
			  		  			console.log(result);
				  		  		if(result==1){
				  		  			cuowu("本月考勤已开始，不能修改或禁用本月假期");
				  				}else{
				  					panduan(qi,id,clas,kai,jie)
				  				}
			  		  		}
			  		  	});	
					}else{
						$("#form").submit();
	  					$("#form").form("clear");
	  					guanbi();
	  					$("#content-admin").panel('open').panel('refresh','kq-vacation-manage');
					}
				}else{
					//否，则判断修改之前的时间是否为已过考勤
					$.ajax({
		  		  		url:"select-vacation",
		  		  		type:"post",
		  		  		data:{"lei":1,"type":clas,"kai":kai,"jie":jie,"id":id},
		  		  		success:function(result){
			  		  		if(result==1){
			  		  			cuowu("本月考勤已开始，不能新增本月假期");
			  				}else{
			  					panduan(qi,id,clas,kai,jie)
			  				}
		  		  		}
		  		  	});	
					
				}
			}else{
				cuowu("假期的结束时间不能小于开始时间");
			}
		}
	});
	$("#btn-add").click(function(){
		$("#yuan").removeClass("one_kai");
		$("#zhui").removeClass("kai");
		$("#zhui").addClass("guan");
		if($("#reQi").val()!=0){
			$("#yuan").animate({ 
				left:'0px',
		  	}, 1 );
		}
		qingkong();
		kaiqi();
		$(".modal-body").attr("name",2);
	});
	$("#btn-xiu").click(function(){
		kaiqi();
	});
	$("#yuan").click(function(){
		if($("#RE_QI").val()==0){
			$("#zhui").removeClass("guan");
			$("#zhui").addClass("kai");
			$(this).animate({ 
				left:'+30px',
		  	}, 100 );
			$("#RE_QI").val("1");
		}else{
			$("#zhui").removeClass("kai");
			$("#zhui").addClass("guan");
			$(this).animate({ 
				left:'0px',
		  	}, 100 );
			$("#RE_QI").val("0")
		}
	});
});
function panduan(qi,id,clas,kai,jie){
	if(qi==1){
		if(id==""){
			id=0;
		}
		$.ajax({
		  		url:"select-vacation",
		  		type:"post",
		  		data:{"lei":2,"type":clas,"kai":kai,"jie":jie,"id":id},
		  		success:function(result){
  		  		if(result==1){
  		  			cuowu("已启用的假期中已包含当前假期");
  				}else{
  					$("#form").submit();
  					$("#form").form("clear");
  					guanbi();
  					$("#content-admin").panel('open').panel('refresh','kq-vacation-manage');
  				}
		  		}
		  	});	
	}else{
		$("#form").submit();
			$("#form").form("clear");
			guanbi();
			$("#content-admin").panel('open').panel('refresh','kq-vacation-manage');
	}	
}
function cuowu(text){
	var div=$("<div>");
	var img=$("<img>");
	var span=$("<span>");
	div.addClass("bug");
	img.attr("src","static/easyui/themes/icons/cuowu.png");
	span.addClass("cuowu-tishi");
	span.html(text);
	div.append(img);
	div.append(span);
	$(".cuowudiv").append(div);
	var timer=setTimeout(function () {
		div.slideUp("fast");
		div.remove();
	}, 2000);
}
function guanbi(){
	$(".modal").hide();
	$(".modal-backdrop").hide();
}
function kaiqi(){
	$(".modal").show();
	$(".modal-backdrop").show();
}
function qingkong(){
	$("#RE_NAME").val("");
	$("#RE_ID").val("");
	$("#RE_QI").val("0");
	$("#RE_KAI").datebox('setValue', '');
	$("#RE_JIE").datebox('setValue', '');
	$("#kai").val("");
	$("#jie").val("");
	$("#qi").val("");
	$(".recla").combobox('setValue', '');
	$("#RE_CLASS").val("");
}
</script>
<div class="index-body1">
	<div class="index-body2">
			<div class="index-body3">
				<div class="title">
					<div class="title-left"> 
						<button class="btn3" id="btn-add" class="easyui-linkbutton">新增假期</button>
					</div>
				</div>
				<div class="body-table">
					<table id="table1" class="easyui-datagrid" data-options="width:1023,fitColumns:true,height:300">
					  
					</table>
				</div>
			</div>
	</div>
</div>

<div class="modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close">×</button>
				<h3>新增假期</h3>
			</div>
			<div class="modal-body">
				<Form action="add_jiaqi" method="post" id="form">
					<div class="modal-form-group">
						<div class="form-group-text1">
						<input type="hidden" id="RE_ID" name="RE_ID">
							<span>假期名：</span><input type="text" id="RE_NAME" name="RE_NAME" placeholder="假期名" >
						</div>
					</div >
					<div class="modal-form-group">
						<div class="form-group-text2">
							<input id="kai" type="hidden">
							<input id="jie" type="hidden">
							<ul class="top-se">
							<li><span>开始时间</span></li>
							<li><input id="RE_KAI" type="text" class="easyui-datebox" required="required" style="width:150px" name="RE_KAI"></li>
							<li><span>至</span></li>
							<li><input id="RE_JIE" type="text" class="easyui-datebox" required="required" style="width:150px" name="RE_JIE"></li>
							</ul>
						</div>
					</div >
					<div class="modal-form-group">
						<div class="form-group-text3">
							<span>假期类型：</span>
							<input class="recla"  class="easyui-combobox" />
							<input id="RE_CLASS" name="RE_CLASS" type="hidden">
						</div>
						<div class="form-group-text4">
							<span>是否启用：</span>
							<div id="zhui">
							<div id="yuan"><input type="hidden"  id="RE_QI" name="RE_QI"  value="0"/></div>
							<input id="qi" type="hidden">
							</div>
						</div>
					</div>
				</Form>
			</div>
			<div class="modal-footer">
				<button class="btn-close">关闭</button>
				<button class="btn-yes">确定</button>
			</div>
		</div>
	</div>
</div>
<div class="modal-backdrop"></div>

</body>
</html>